<template>
  <view class="container">
    <!-- 表单内容区域 -->
    <scroll-view class="form-content" scroll-y="true">
      <!-- 描述内容区域 -->
      <view class="form-section">
        <view class="section-header">
          <text class="section-title">描述内容</text>
          <text class="word-count">{{ descText.length }}/500</text>
        </view>
        
        <u-textarea
          v-model="descText"
          placeholder="请尽可能详细的描述您的需求和使用场景"
          height="200"
          maxlength="500"
          count
          placeholderClass="textarea-placeholder"
        ></u-textarea>
        
        <view class="hint-text">
          <text>1、需求描述：您希望实现什么功能？</text>
          <text>2、场景描述：您希望使用此功能带来什么效果？</text>
        </view>
      </view>

      <!-- 上传图片区域 -->
      <view class="form-section">
        <view class="section-header">
          <text class="section-title">上传图片</text>
          <text class="word-count">{{ imageList.length }}/6</text>
        </view>
        
        <u-upload
          :fileList="imageList"
          @afterRead="afterRead"
          @delete="deleteImage"
          name="image"
          multiple
          :maxCount="6"
          previewFullImage
          width="160"
          height="160"
        >
          <view class="upload-btn">
            <u-icon name="plus" size="40" color="#ccc"></u-icon>
          </view>
        </u-upload>
        
        <text class="upload-hint">支持上传6张图片，每张不超过10M</text>
      </view>

      <!-- 联系方式区域 -->
      <view class="form-section">
        <view class="section-header">
          <text class="section-title">联系方式</text>
        </view>
        
        <u-input
          v-model="contactInfo"
          placeholder="请填写手机号、微信号等联系方式"
          border="none"
          placeholderClass="input-placeholder"
        ></u-input>
      </view>
    </scroll-view>

    <!-- 底部按钮 -->
    <view class="footer-buttons">
      <u-button 
        type="default" 
        plain 
        @click="handleCancel"
        customStyle="width: 45%; height: 88rpx;"
      >
        取消
      </u-button>
      
      <u-button 
        type="primary" 
        @click="handleSubmit"
        :disabled="!canSubmit"
        customStyle="width: 45%; height: 88rpx; background-color: #66b1ff;"
      >
        提交
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      descText: '', // 描述内容
      imageList: [], // 图片列表
      contactInfo: '', // 联系方式
    }
  },
  computed: {
    // 检查是否可以提交
    canSubmit() {
      return this.descText.length > 0 && this.contactInfo.length > 0;
    }
  },
  methods: {
    // 图片上传完成回调
    afterRead(event) {
      const files = event.file;
      if (this.imageList.length + files.length > 6) {
        uni.showToast({
          title: '最多只能上传6张图片',
          icon: 'none'
        });
        return;
      }
      
      // 模拟上传过程
      files.forEach(file => {
        this.imageList.push({
          url: file.url,
          status: 'uploading',
          message: '上传中...'
        });
        
        // 模拟上传延迟
        setTimeout(() => {
          const index = this.imageList.findIndex(item => item.url === file.url);
          if (index !== -1) {
            this.$set(this.imageList, index, {
              ...this.imageList[index],
              status: 'success',
              message: '上传成功'
            });
          }
        }, 1500);
      });
    },
    
    // 删除图片
    deleteImage(event) {
      this.imageList.splice(event.index, 1);
    },
    
    // 取消操作
    handleCancel() {
      uni.showModal({
        title: '提示',
        content: '确定要取消提交吗？所有填写的内容将丢失',
        success: (res) => {
          if (res.confirm) {
            this.resetForm();
            uni.navigateBack();
          }
        }
      });
    },
    
    // 提交表单
    handleSubmit() {
      if (!this.canSubmit) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      
      // 验证联系方式格式
      if (!this.validateContact()) {
        uni.showToast({
          title: '请输入有效的联系方式',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({
        title: '提交中...'
      });
      
      // 模拟提交到服务器
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '您的意见已收到',
          icon: 'success'
        });
        
        // 重置表单并返回
        setTimeout(() => {
          this.resetForm();
          uni.navigateBack();
        }, 1500);
      }, 2000);
    },
    
    // 验证联系方式
    validateContact() {
      const contact = this.contactInfo.trim();
      
      // 手机号验证
      const phoneRegex = /^1[3-9]\d{9}$/;
      // 微信号验证（简单验证）
      const wechatRegex = /^[a-zA-Z][\w-]{5,19}$/;
      
      return phoneRegex.test(contact) || wechatRegex.test(contact);
    },
    
    // 重置表单
    resetForm() {
      this.descText = '';
      this.imageList = [];
      this.contactInfo = '';
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.navbar-right {
  padding-right: 30rpx;
}

.form-content {
  flex: 1;
  padding: 30rpx;
  box-sizing: border-box;
}

.form-section {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.word-count {
  font-size: 26rpx;
  color: #999999;
}

.textarea-placeholder {
  color: #cccccc;
  font-size: 28rpx;
}

.hint-text {
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.hint-text text {
  font-size: 24rpx;
  color: #999999;
  line-height: 1.5;
}

.upload-btn {
  width: 160rpx;
  height: 160rpx;
  border: 2rpx dashed #cccccc;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
}

.upload-hint {
  display: block;
  margin-top: 16rpx;
  font-size: 24rpx;
  color: #999999;
}

.input-placeholder {
  color: #cccccc;
  font-size: 28rpx;
}

.footer-buttons {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-top: 1rpx solid #f0f0f0;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .form-content {
    padding: 20rpx;
  }
  
  .form-section {
    padding: 24rpx;
  }
  
  .footer-buttons {
    padding: 16rpx 20rpx;
  }
}

/* 动画效果 */
.form-section {
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 自定义uView组件样式 */
::v-deep .u-textarea__field {
  font-size: 28rpx;
  line-height: 1.6;
}

::v-deep .u-upload__deletable {
  border-radius: 8rpx;
}

::v-deep .u-input__content__field {
  font-size: 28rpx;
}
</style>